<template>
	<el-aside :width="$store.state.isCollapsed ? '64px' : '145px'">
		<el-menu
			:collapse="$store.state.isCollapsed"
			:collapse-transition="false"
			:router="true"
			:default-active="route.fullPath"
		>
			<el-menu-item index="/home">
				<el-icon>
					<home-filled />
				</el-icon>
				<span>首页</span>
			</el-menu-item>

			<el-menu-item index="/center">
				<el-icon>
					<avatar />
				</el-icon>
				<span>个人中心</span>
			</el-menu-item>

			<el-sub-menu index="/user-manager">
				<template #title>
					<el-icon>
						<user-filled />
					</el-icon>
					<span>用户管理</span>
				</template>
				<el-menu-item index="/user-manager/adduser"
					>添加用户</el-menu-item
				>
				<el-menu-item index="/user-manager/userlists"
					>用户列表</el-menu-item
				>
			</el-sub-menu>

			<el-sub-menu index="/news-manager">
				<template #title>
					<el-icon>
						<message-box />
					</el-icon>
					<span>新闻管理</span>
				</template>
				<el-menu-item index="/news-manager/addnews"
					>添加新闻</el-menu-item
				>
				<el-menu-item index="/news-manager/newslists"
					>新闻列表</el-menu-item
				>
			</el-sub-menu>

			<el-sub-menu index="/product-manager">
				<template #title>
					<el-icon>
						<goods />
					</el-icon>
					<span>产品管理</span>
				</template>
				<el-menu-item index="/product-manager/addproduct"
					>添加产品</el-menu-item
				>
				<el-menu-item index="/product-manager/productlists"
					>产品列表</el-menu-item
				>
			</el-sub-menu>
		</el-menu>
	</el-aside>
</template>

<script setup>
import {
	HomeFilled,
	UserFilled,
	Avatar,
	MessageBox,
	Goods,
	Pointer,
} from "@element-plus/icons-vue";

import { useRoute } from "vue-router";
const route = useRoute();
</script>


<style lang="scss" scoped>
.el-aside {
	height: 100vh;

	.el-menu {
		height: 100vh;
	}
}
</style>